/**
 * 主题配置文件
 * 管理所有主题的颜色、图片和样式配置
 */

/**
 * 响应式背景图片配置
 */
export interface ResponsiveBackground {
  /** 移动端图片 (< 768px) */
  mobile?: string
  /** 平板端图片 (768px - 1024px) */
  tablet?: string
  /** 桌面端图片 (> 1024px) */
  desktop?: string
  /** 默认图片（如果没有指定特定尺寸） */
  default?: string
}

export interface ThemeConfig {
  id: string
  name: string
  description: string
  icon: string
  preview: string
  category: 'solid' | 'gradient' | 'image' | 'animated'
  backgrounds: {
    hero: string | ResponsiveBackground
    card: string | ResponsiveBackground
    section: string | ResponsiveBackground
    body: string | ResponsiveBackground
  }
  colors: {
    primary: string
    secondary: string
    accent: string
    neutral: string
    base: string
    info: string
    success: string
    warning: string
    error: string
  }
  gradients: {
    primary: string
    secondary: string
    hero: string
    card: string
  }
  shadows: {
    sm: string
    md: string
    lg: string
    xl: string
  }
  animations?: {
    particles?: boolean
    waves?: boolean
    matrix?: boolean
    fireflies?: boolean
    geometric?: boolean
  }
}

export interface ThemeCategory {
  id: string
  name: string
  icon: string
  description: string
  color: string
}

export const themeCategories: ThemeCategory[] = [
  {
    id: 'solid',
    name: '纯色主题',
    icon: '🎨',
    description: '简洁的纯色配色方案',
    color: '#3b82f6',
  },
  {
    id: 'gradient',
    name: '渐变主题',
    icon: '🌈',
    description: '优美的渐变色彩效果',
    color: '#8b5cf6',
  },
  {
    id: 'image',
    name: '图片主题',
    icon: '🖼️',
    description: '精美的背景图片主题',
    color: '#10b981',
  },
  {
    id: 'animated',
    name: '动画主题',
    icon: '✨',
    description: '炫酷的动画特效主题',
    color: '#f59e0b',
  },
]

export const themes: Record<string, ThemeConfig> = {
  // 纯色主题
  light: {
    id: 'light',
    name: '明亮',
    description: '清新明亮的白色主题',
    icon: '☀️',
    category: 'solid',
    preview: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=200&fit=crop',
    backgrounds: {
      hero: 'bg-hero-light',
      card: 'bg-card-light',
      section: 'bg-section-light',
      body: 'bg-gradient-to-br from-blue-50 to-indigo-100',
    },
    colors: {
      primary: '#667eea',
      secondary: '#764ba2',
      accent: '#f093fb',
      neutral: '#3d4451',
      base: '#ffffff',
      info: '#3abff8',
      success: '#36d399',
      warning: '#fbbd23',
      error: '#f87272',
    },
    gradients: {
      primary: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      secondary: 'linear-gradient(135deg, #764ba2 0%, #667eea 100%)',
      hero: 'linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%)',
      card: 'linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%)',
    },
    shadows: {
      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1)',
    },
  },

  dark: {
    id: 'dark',
    name: '暗黑',
    description: '优雅的深色主题',
    icon: '🌙',
    category: 'solid',
    preview: 'https://images.unsplash.com/photo-1519681393784-d120267933ba?w=400&h=200&fit=crop',
    backgrounds: {
      hero: 'bg-hero-dark',
      card: 'bg-card-dark',
      section: 'bg-section-dark',
      body: 'bg-gradient-to-br from-slate-900 to-slate-800',
    },
    colors: {
      primary: '#667eea',
      secondary: '#764ba2',
      accent: '#f093fb',
      neutral: '#1f2937',
      base: '#1f2937',
      info: '#3abff8',
      success: '#36d399',
      warning: '#fbbd23',
      error: '#f87272',
    },
    gradients: {
      primary: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      secondary: 'linear-gradient(135deg, #764ba2 0%, #667eea 100%)',
      hero: 'linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.9) 100%)',
      card: 'linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(51, 65, 85, 0.8) 100%)',
    },
    shadows: {
      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.3)',
      md: '0 4px 6px -1px rgba(0, 0, 0, 0.4)',
      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.4)',
      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.5)',
    },
  },

  minimal: {
    id: 'minimal',
    name: '极简',
    description: '极简主义设计风格',
    icon: '⚪',
    category: 'solid',
    preview: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400&h=200&fit=crop',
    backgrounds: {
      hero: 'bg-white',
      card: 'bg-gray-50',
      section: 'bg-gray-100',
      body: 'bg-white',
    },
    colors: {
      primary: '#000000',
      secondary: '#6b7280',
      accent: '#374151',
      neutral: '#9ca3af',
      base: '#ffffff',
      info: '#6b7280',
      success: '#10b981',
      warning: '#f59e0b',
      error: '#ef4444',
    },
    gradients: {
      primary: 'linear-gradient(135deg, #000000 0%, #374151 100%)',
      secondary: 'linear-gradient(135deg, #6b7280 0%, #9ca3af 100%)',
      hero: 'linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(107, 114, 128, 0.05) 100%)',
      card: 'linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 250, 251, 0.9) 100%)',
    },
    shadows: {
      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1)',
    },
  },

  corporate: {
    id: 'corporate',
    name: '商务',
    description: '专业的商务风格',
    icon: '💼',
    category: 'solid',
    preview: 'https://images.unsplash.com/photo-1497366216548-37526070297c?w=400&h=200&fit=crop',
    backgrounds: {
      hero: 'bg-slate-800',
      card: 'bg-white',
      section: 'bg-slate-50',
      body: 'bg-slate-100',
    },
    colors: {
      primary: '#1e40af',
      secondary: '#475569',
      accent: '#0ea5e9',
      neutral: '#64748b',
      base: '#ffffff',
      info: '#0ea5e9',
      success: '#059669',
      warning: '#d97706',
      error: '#dc2626',
    },
    gradients: {
      primary: 'linear-gradient(135deg, #1e40af 0%, #475569 100%)',
      secondary: 'linear-gradient(135deg, #475569 0%, #64748b 100%)',
      hero: 'linear-gradient(135deg, rgba(30, 64, 175, 0.9) 0%, rgba(71, 85, 105, 0.9) 100%)',
      card: 'linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%)',
    },
    shadows: {
      sm: '0 1px 2px 0 rgba(30, 64, 175, 0.1)',
      md: '0 4px 6px -1px rgba(30, 64, 175, 0.15)',
      lg: '0 10px 15px -3px rgba(30, 64, 175, 0.2)',
      xl: '0 20px 25px -5px rgba(30, 64, 175, 0.25)',
    },
  },

  // 渐变主题
  aurora: {
    id: 'aurora',
    name: '极光',
    description: '绚烂的极光渐变效果',
    icon: '🌌',
    category: 'gradient',
    preview: 'https://images.unsplash.com/photo-1531366936337-7c912a4589a7?w=400&h=200&fit=crop',
    backgrounds: {
      hero: 'bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900',
      card: 'bg-gradient-to-br from-purple-100 to-blue-100',
      section: 'bg-gradient-to-r from-purple-50 to-blue-50',
      body: 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-900',
    },
    colors: {
      primary: '#8b5cf6',
      secondary: '#3b82f6',
      accent: '#ec4899',
      neutral: '#374151',
      base: '#1e1b4b',
      info: '#06b6d4',
      success: '#10b981',
      warning: '#f59e0b',
      error: '#ef4444',
    },
    gradients: {
      primary: 'linear-gradient(135deg, #8b5cf6 0%, #3b82f6 50%, #ec4899 100%)',
      secondary: 'linear-gradient(135deg, #ec4899 0%, #8b5cf6 50%, #3b82f6 100%)',
      hero: 'linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(59, 130, 246, 0.3) 50%, rgba(236, 72, 153, 0.3) 100%)',
      card: 'linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%)',
    },
    shadows: {
      sm: '0 1px 2px 0 rgba(139, 92, 246, 0.2)',
      md: '0 4px 6px -1px rgba(139, 92, 246, 0.3)',
      lg: '0 10px 15px -3px rgba(139, 92, 246, 0.4)',
      xl: '0 20px 25px -5px rgba(139, 92, 246, 0.5)',
    },
  },

  rainbow: {
    id: 'rainbow',
    name: '彩虹',
    description: '七彩渐变效果',
    icon: '🌈',
    category: 'gradient',
    preview: 'https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=400&h=200&fit=crop',
    backgrounds: {
      hero: 'bg-gradient-to-r from-red-500 via-yellow-500 via-green-500 via-blue-500 to-purple-500',
      card: 'bg-gradient-to-br from-red-50 via-yellow-50 to-blue-50',
      section: 'bg-gradient-to-r from-pink-50 to-violet-50',
      body: 'bg-gradient-to-br from-red-100 via-yellow-100 via-green-100 via-blue-100 to-purple-100',
    },
    colors: {
      primary: '#ef4444',
      secondary: '#8b5cf6',
      accent: '#10b981',
      neutral: '#374151',
      base: '#ffffff',
      info: '#06b6d4',
      success: '#10b981',
      warning: '#f59e0b',
      error: '#ef4444',
    },
    gradients: {
      primary:
        'linear-gradient(135deg, #ef4444 0%, #f59e0b 20%, #10b981 40%, #06b6d4 60%, #3b82f6 80%, #8b5cf6 100%)',
      secondary:
        'linear-gradient(135deg, #8b5cf6 0%, #3b82f6 20%, #06b6d4 40%, #10b981 60%, #f59e0b 80%, #ef4444 100%)',
      hero: 'linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(245, 158, 11, 0.2) 20%, rgba(16, 185, 129, 0.2) 40%, rgba(6, 182, 212, 0.2) 60%, rgba(59, 130, 246, 0.2) 80%, rgba(139, 92, 246, 0.2) 100%)',
      card: 'linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(254, 202, 202, 0.1) 25%, rgba(254, 240, 138, 0.1) 50%, rgba(167, 243, 208, 0.1) 75%, rgba(191, 219, 254, 0.1) 100%)',
    },
    shadows: {
      sm: '0 1px 2px 0 rgba(239, 68, 68, 0.1)',
      md: '0 4px 6px -1px rgba(139, 92, 246, 0.2)',
      lg: '0 10px 15px -3px rgba(16, 185, 129, 0.3)',
      xl: '0 20px 25px -5px rgba(59, 130, 246, 0.4)',
    },
  },

  neon: {
    id: 'neon',
    name: '霓虹',
    description: '炫酷的霓虹渐变',
    icon: '💫',
    category: 'gradient',
    preview: 'https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=400&h=200&fit=crop',
    backgrounds: {
      hero: 'bg-gradient-to-br from-black via-purple-900 to-violet-900',
      card: 'bg-gradient-to-br from-gray-900 to-purple-900',
      section: 'bg-gradient-to-r from-black to-gray-900',
      body: 'bg-black',
    },
    colors: {
      primary: '#a855f7',
      secondary: '#ec4899',
      accent: '#06b6d4',
      neutral: '#1f2937',
      base: '#000000',
      info: '#06b6d4',
      success: '#00ff88',
      warning: '#ffaa00',
      error: '#ff0066',
    },
    gradients: {
      primary: 'linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #06b6d4 100%)',
      secondary: 'linear-gradient(135deg, #06b6d4 0%, #a855f7 50%, #ec4899 100%)',
      hero: 'linear-gradient(135deg, rgba(168, 85, 247, 0.4) 0%, rgba(236, 72, 153, 0.4) 50%, rgba(6, 182, 212, 0.4) 100%)',
      card: 'linear-gradient(135deg, rgba(31, 41, 55, 0.8) 0%, rgba(75, 85, 99, 0.8) 100%)',
    },
    shadows: {
      sm: '0 1px 2px 0 rgba(168, 85, 247, 0.3)',
      md: '0 4px 6px -1px rgba(168, 85, 247, 0.4), 0 0 20px rgba(236, 72, 153, 0.3)',
      lg: '0 10px 15px -3px rgba(168, 85, 247, 0.5), 0 0 30px rgba(236, 72, 153, 0.4)',
      xl: '0 20px 25px -5px rgba(168, 85, 247, 0.6), 0 0 40px rgba(6, 182, 212, 0.5)',
    },
  },

  // 图片主题
  forest: {
    id: 'forest',
    name: '森林',
    description: '自然清新的森林背景',
    icon: '🌲',
    category: 'image',
    preview: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=400&h=200&fit=crop',
    backgrounds: {
      hero: {
        mobile:
          'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&h=600&fit=crop&q=80',
        tablet:
          'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=1200&h=800&fit=crop&q=85',
        desktop:
          'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=1920&h=1080&fit=crop&q=90',
        default:
          'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=1920&h=1080&fit=crop&q=90',
      },
      card: {
        mobile:
          'https://images.unsplash.com/photo-1511497584788-876760111969?w=400&h=300&fit=crop&q=80',
        tablet:
          'https://images.unsplash.com/photo-1511497584788-876760111969?w=600&h=400&fit=crop&q=85',
        desktop:
          'https://images.unsplash.com/photo-1511497584788-876760111969?w=800&h=600&fit=crop&q=90',
        default:
          'https://images.unsplash.com/photo-1511497584788-876760111969?w=800&h=600&fit=crop&q=90',
      },
      section: 'bg-gradient-to-r from-green-50/80 to-emerald-50/80',
      body: 'bg-gradient-to-br from-green-50 to-emerald-100',
    },
    colors: {
      primary: '#22c55e',
      secondary: '#15803d',
      accent: '#84cc16',
      neutral: '#374151',
      base: '#f0fdf4',
      info: '#06b6d4',
      success: '#10b981',
      warning: '#f59e0b',
      error: '#ef4444',
    },
    gradients: {
      primary: 'linear-gradient(135deg, #22c55e 0%, #15803d 100%)',
      secondary: 'linear-gradient(135deg, #15803d 0%, #22c55e 100%)',
      hero: 'linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.2) 100%)',
      card: 'linear-gradient(135deg, rgba(240, 253, 244, 0.9) 0%, rgba(220, 252, 231, 0.9) 100%)',
    },
    shadows: {
      sm: '0 1px 2px 0 rgba(34, 197, 94, 0.1)',
      md: '0 4px 6px -1px rgba(34, 197, 94, 0.15)',
      lg: '0 10px 15px -3px rgba(34, 197, 94, 0.2)',
      xl: '0 20px 25px -5px rgba(34, 197, 94, 0.25)',
    },
  },

  ocean: {
    id: 'ocean',
    name: '海洋',
    description: '宁静深邃的海洋背景',
    icon: '🌊',
    category: 'image',
    preview: 'https://images.unsplash.com/photo-1439066615861-d1af74d74000?w=400&h=200&fit=crop',
    backgrounds: {
      hero: {
        mobile:
          'https://images.unsplash.com/photo-1439066615861-d1af74d74000?w=800&h=600&fit=crop&q=80',
        tablet:
          'https://images.unsplash.com/photo-1439066615861-d1af74d74000?w=1200&h=800&fit=crop&q=85',
        desktop:
          'https://images.unsplash.com/photo-1439066615861-d1af74d74000?w=1920&h=1080&fit=crop&q=90',
        default:
          'https://images.unsplash.com/photo-1439066615861-d1af74d74000?w=1920&h=1080&fit=crop&q=90',
      },
      card: {
        mobile:
          'https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=400&h=300&fit=crop&q=80',
        tablet:
          'https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=600&h=400&fit=crop&q=85',
        desktop:
          'https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=800&h=600&fit=crop&q=90',
        default:
          'https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=800&h=600&fit=crop&q=90',
      },
      section: 'bg-gradient-to-r from-blue-50/80 to-cyan-50/80',
      body: 'bg-gradient-to-br from-blue-50 to-cyan-100',
    },
    colors: {
      primary: '#3b82f6',
      secondary: '#1e40af',
      accent: '#06b6d4',
      neutral: '#475569',
      base: '#eff6ff',
      info: '#0ea5e9',
      success: '#10b981',
      warning: '#f59e0b',
      error: '#ef4444',
    },
    gradients: {
      primary: 'linear-gradient(135deg, #3b82f6 0%, #1e40af 100%)',
      secondary: 'linear-gradient(135deg, #1e40af 0%, #3b82f6 100%)',
      hero: 'linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.2) 100%)',
      card: 'linear-gradient(135deg, rgba(239, 246, 255, 0.9) 0%, rgba(219, 234, 254, 0.9) 100%)',
    },
    shadows: {
      sm: '0 1px 2px 0 rgba(59, 130, 246, 0.1)',
      md: '0 4px 6px -1px rgba(59, 130, 246, 0.15)',
      lg: '0 10px 15px -3px rgba(59, 130, 246, 0.2)',
      xl: '0 20px 25px -5px rgba(59, 130, 246, 0.25)',
    },
  },

  mountain: {
    id: 'mountain',
    name: '山峦',
    description: '壮丽的山峦风景',
    icon: '🏔️',
    category: 'image',
    preview: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=200&fit=crop',
    backgrounds: {
      hero: {
        mobile:
          'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop&q=80',
        tablet:
          'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&h=800&fit=crop&q=85',
        desktop:
          'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&h=1080&fit=crop&q=90',
        default:
          'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&h=1080&fit=crop&q=90',
      },
      card: {
        mobile:
          'https://images.unsplash.com/photo-1519681393784-d120267933ba?w=400&h=300&fit=crop&q=80',
        tablet:
          'https://images.unsplash.com/photo-1519681393784-d120267933ba?w=600&h=400&fit=crop&q=85',
        desktop:
          'https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&h=600&fit=crop&q=90',
        default:
          'https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&h=600&fit=crop&q=90',
      },
      section: 'bg-gradient-to-r from-slate-50/80 to-stone-50/80',
      body: 'bg-gradient-to-br from-slate-50 to-stone-100',
    },
    colors: {
      primary: '#78716c',
      secondary: '#57534e',
      accent: '#a8a29e',
      neutral: '#44403c',
      base: '#fafaf9',
      info: '#0ea5e9',
      success: '#10b981',
      warning: '#f59e0b',
      error: '#ef4444',
    },
    gradients: {
      primary: 'linear-gradient(135deg, #78716c 0%, #57534e 100%)',
      secondary: 'linear-gradient(135deg, #57534e 0%, #78716c 100%)',
      hero: 'linear-gradient(135deg, rgba(120, 113, 108, 0.3) 0%, rgba(87, 83, 78, 0.3) 100%)',
      card: 'linear-gradient(135deg, rgba(250, 250, 249, 0.9) 0%, rgba(245, 245, 244, 0.9) 100%)',
    },
    shadows: {
      sm: '0 1px 2px 0 rgba(120, 113, 108, 0.1)',
      md: '0 4px 6px -1px rgba(120, 113, 108, 0.15)',
      lg: '0 10px 15px -3px rgba(120, 113, 108, 0.2)',
      xl: '0 20px 25px -5px rgba(120, 113, 108, 0.25)',
    },
  },

  space: {
    id: 'space',
    name: '星空',
    description: '浩瀚的星空宇宙',
    icon: '🌌',
    category: 'image',
    preview: 'https://images.unsplash.com/photo-1446776653964-20c1d3a81b06?w=400&h=200&fit=crop',
    backgrounds: {
      hero: {
        mobile:
          'https://images.unsplash.com/photo-1446776653964-20c1d3a81b06?w=800&h=600&fit=crop&q=80',
        tablet:
          'https://images.unsplash.com/photo-1446776653964-20c1d3a81b06?w=1200&h=800&fit=crop&q=85',
        desktop:
          'https://images.unsplash.com/photo-1446776653964-20c1d3a81b06?w=1920&h=1080&fit=crop&q=90',
        default:
          'https://images.unsplash.com/photo-1446776653964-20c1d3a81b06?w=1920&h=1080&fit=crop&q=90',
      },
      card: {
        mobile:
          'https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=400&h=300&fit=crop&q=80',
        tablet:
          'https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=600&h=400&fit=crop&q=85',
        desktop:
          'https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=800&h=600&fit=crop&q=90',
        default:
          'https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=800&h=600&fit=crop&q=90',
      },
      section: 'bg-gradient-to-r from-indigo-900/80 to-purple-900/80',
      body: 'bg-gradient-to-br from-indigo-900 to-purple-900',
    },
    colors: {
      primary: '#6366f1',
      secondary: '#8b5cf6',
      accent: '#a855f7',
      neutral: '#1e1b4b',
      base: '#0f0f23',
      info: '#06b6d4',
      success: '#10b981',
      warning: '#f59e0b',
      error: '#ef4444',
    },
    gradients: {
      primary: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
      secondary: 'linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%)',
      hero: 'linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%)',
      card: 'linear-gradient(135deg, rgba(30, 27, 75, 0.8) 0%, rgba(55, 48, 163, 0.8) 100%)',
    },
    shadows: {
      sm: '0 1px 2px 0 rgba(99, 102, 241, 0.2)',
      md: '0 4px 6px -1px rgba(99, 102, 241, 0.3)',
      lg: '0 10px 15px -3px rgba(99, 102, 241, 0.4)',
      xl: '0 20px 25px -5px rgba(99, 102, 241, 0.5)',
    },
  },

  // 动画主题
  particles: {
    id: 'particles',
    name: '粒子',
    description: '动态粒子特效背景',
    icon: '✨',
    category: 'animated',
    preview: 'https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=400&h=200&fit=crop',
    backgrounds: {
      hero: 'bg-gradient-to-br from-indigo-900 to-purple-900',
      card: 'bg-gradient-to-br from-indigo-50 to-purple-50',
      section: 'bg-gradient-to-r from-indigo-100 to-purple-100',
      body: 'bg-gradient-to-br from-slate-900 to-indigo-900',
    },
    colors: {
      primary: '#6366f1',
      secondary: '#8b5cf6',
      accent: '#a855f7',
      neutral: '#374151',
      base: '#1e1b4b',
      info: '#06b6d4',
      success: '#10b981',
      warning: '#f59e0b',
      error: '#ef4444',
    },
    gradients: {
      primary: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
      secondary: 'linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%)',
      hero: 'linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%)',
      card: 'linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%)',
    },
    shadows: {
      sm: '0 1px 2px 0 rgba(99, 102, 241, 0.2)',
      md: '0 4px 6px -1px rgba(99, 102, 241, 0.3)',
      lg: '0 10px 15px -3px rgba(99, 102, 241, 0.4)',
      xl: '0 20px 25px -5px rgba(99, 102, 241, 0.5)',
    },
    animations: {
      particles: true,
    },
  },

  matrix: {
    id: 'matrix',
    name: '矩阵',
    description: '黑客帝国风格代码雨',
    icon: '💚',
    category: 'animated',
    preview: 'https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=400&h=200&fit=crop',
    backgrounds: {
      hero: 'bg-black',
      card: 'bg-gradient-to-br from-green-900 to-black',
      section: 'bg-gradient-to-r from-black to-green-900',
      body: 'bg-black',
    },
    colors: {
      primary: '#00ff41',
      secondary: '#008f11',
      accent: '#39ff14',
      neutral: '#0d1117',
      base: '#000000',
      info: '#00ff88',
      success: '#00ff41',
      warning: '#ffff00',
      error: '#ff0000',
    },
    gradients: {
      primary: 'linear-gradient(135deg, #00ff41 0%, #008f11 100%)',
      secondary: 'linear-gradient(135deg, #008f11 0%, #39ff14 100%)',
      hero: 'linear-gradient(135deg, rgba(0, 255, 65, 0.2) 0%, rgba(0, 143, 17, 0.2) 100%)',
      card: 'linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 143, 17, 0.1) 100%)',
    },
    shadows: {
      sm: '0 1px 2px 0 rgba(0, 255, 65, 0.3)',
      md: '0 4px 6px -1px rgba(0, 255, 65, 0.4), 0 0 20px rgba(0, 255, 65, 0.2)',
      lg: '0 10px 15px -3px rgba(0, 255, 65, 0.5), 0 0 30px rgba(0, 255, 65, 0.3)',
      xl: '0 20px 25px -5px rgba(0, 255, 65, 0.6), 0 0 40px rgba(0, 255, 65, 0.4)',
    },
    animations: {
      matrix: true,
    },
  },
}

export const defaultTheme = 'light'

export const getTheme = (themeId: string): ThemeConfig => {
  return themes[themeId] || themes[defaultTheme]
}

export const getThemeList = (): ThemeConfig[] => {
  return Object.values(themes)
}

export const getThemesByCategory = (category: string): ThemeConfig[] => {
  return Object.values(themes).filter((theme) => theme.category === category)
}

export const getCategoryById = (categoryId: string): ThemeCategory | undefined => {
  return themeCategories.find((category) => category.id === categoryId)
}

/**
 * 根据屏幕宽度获取响应式背景图片URL
 * @param background 背景配置（可以是字符串或响应式配置对象）
 * @param screenWidth 屏幕宽度（可选，默认使用 window.innerWidth）
 * @returns 背景URL或CSS类名
 */
export const getResponsiveBackground = (
  background: string | ResponsiveBackground,
  screenWidth?: number,
): string => {
  // 如果是字符串，直接返回
  if (typeof background === 'string') {
    return background
  }

  // 获取屏幕宽度
  const width = screenWidth ?? (typeof window !== 'undefined' ? window.innerWidth : 1920)

  // 根据屏幕宽度返回对应的图片
  if (width < 768 && background.mobile) {
    return background.mobile
  } else if (width >= 768 && width < 1024 && background.tablet) {
    return background.tablet
  } else if (width >= 1024 && background.desktop) {
    return background.desktop
  }

  // 返回默认图片或桌面图片
  return background.default || background.desktop || background.tablet || background.mobile || ''
}

/**
 * 检查背景是否为响应式图片配置
 * @param background 背景配置
 * @returns 是否为响应式配置
 */
export const isResponsiveBackground = (
  background: string | ResponsiveBackground,
): background is ResponsiveBackground => {
  return typeof background === 'object' && background !== null
}

/**
 * 获取主题的所有响应式背景URL（用于预加载）
 * @param theme 主题配置
 * @returns 所有背景图片URL数组
 */
export const getAllBackgroundUrls = (theme: ThemeConfig): string[] => {
  const urls: string[] = []

  Object.values(theme.backgrounds).forEach((bg) => {
    if (isResponsiveBackground(bg)) {
      if (bg.mobile) urls.push(bg.mobile)
      if (bg.tablet) urls.push(bg.tablet)
      if (bg.desktop) urls.push(bg.desktop)
      if (bg.default) urls.push(bg.default)
    } else if (bg.startsWith('http')) {
      urls.push(bg)
    }
  })

  return [...new Set(urls)] // 去重
}
